<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<div style="width: 400px;height: 300px;border: 1px solid #00;display: flex;flex-direction: column;justify-content: center;align-items: center;">
	<div>
		<span id="hour">00</span>
		<span>:</span>
		<span id="min">00</span>
		<span>:</span>
		<span id="sec">00</span>
	</div>
	<div style="margin-top: 20px;">
		<button onclick="start()">开始</button>
		<button onclick="pause()">暂停</button>
		<button onclick="reset()">复位</button>
		</div>
	</div>

</body>
</html>

<style>
	span{color: red;font-size: 50px}
	button{width: 67px;height: 40px;font-size: 20px}
</style>

<script>
	var sec = document.getElementById('sec');
	var min = document.getElementById('min');
	var hour = document.getElementById('hour');
	var timer;
	var i = 0;
	function start() {
		timer = setInterval(function(){
			i++;
			sec.innerHTML=doublenum(i%60);
			min.innerHTML=doublenum(parseInt(i/60));
			hour.innerHTML=doublenum(parseInt(i/3600));
		},1000)

	}

	function pause(){
		clearInterval(timer)
	}

	function reset(){
		i=0;
		clearInterval(timer);
		sec.innerHTML="00";
		min.innerHTML="00";
		hour.innerHTML="00";
	}
	function doublenum(num){
		if (num<10) {
			return "0"+num
		}else{
			return num
		}
	}
</script>